*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;}

html, body {
    height: 100%;
    -webkit-transition: all .5s linear;
       -moz-transition: all .5s linear;
        -ms-transition: all .5s linear;
         -o-transition: all .5s linear;
            transition: all .5s linear;
}

body{
    position: relative;
    font-family: 'Lato',"PingFang SC","Microsoft YaHei",sans-serif;
    font-size: 14px;
    line-height: 2;
    color: #555;
    background: #fff;
    .game-wrapper{
        position: relative;
        min-height: 100%;
        cursor: url('/image/normal.cur'), default;
        //难度选择
        .game-alert{
            position: absolute;
            display: flex;
            flex-direction: column;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            // box-shadow: 0 0px 10px rgba(0,0,0,.2);
            top: 50%;
            left: 50%;
            width: 170px;
            height: 120px;
            padding: 20px 20px;
            margin-left: -105px;
            margin-top: -80px;
            -webkit-transition: all .25s ease-in-out;
                   -moz-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                     -o-transition: all .25s ease-in-out;
                        transition: all .25s ease-in-out;
            div{
                flex: 1;
                &::after{
                        display: block;
                        content: "";
                        width: 100%;
                        height: 1px;
                        background-color: #000;
                        visibility: hidden;
                        -webkit-transform: scaleX(0);
                        -moz-transform: scaleX(0);
                        -ms-transform: scaleX(0);
                        -o-transform: scaleX(0);
                        transform: scaleX(0);
                        transition-duration: 0.2s;
                        transition-timing-function: ease-in-out;
                        transition-delay: 0s;
                }
                &:hover{
                    &::after{
                        transform: scaleX(1);
                        visibility:visible;
                    }
                    cursor: url('/image/alternate.cur'), pointer;
                }
            }
        }

        //扫雷地图
        .game{
            .map-head{
                width: 300px;
                padding-top: 100px;
                position: relative;
                left: 50%;
                margin-left: -150px;
                display: flex;
                justify-content: space-between;
                cursor: url('/image/alternate.cur'), pointer;
            }
            .map-body{
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;

            }
        }

        //结束弹窗
        .game-over{
            position: absolute;
            width: 340px;
            height: 100px;
            left: 50%;
            margin-left: -170px;
            top: 50%;
            margin-top: -50px;
            background-color: #F2F2F2;
            font-weight: 600;
            border-radius: 5px;
            float: left;
            .over-head{
                display: inline-block;
                // height: 100px;
                width: 70px;
                img{
                    // padding-top: 26px;
                    padding-left: 2px;
                }
            }
            .over-body{
                display: inline-block;
                height: 100%;
                input{
                    width: 145px;
                }
                .btn-1{
                    width: 70px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    background-color: rgba(0,0,0,0.3);
                    margin-top: 10px;
                    margin-left: 50px;
                    cursor: url('/image/alternate.cur'), pointer;
                    &:hover{
                        color: #fff;
                    }
                }
                .body-text{
                    font-size: 20px;

                }
                .btn-2{
                    width: 70px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    background-color: rgba(0,0,0,0.3);
                    position: relative;
                    top: -3px;
                    left: 50px;
                    cursor: url('/image/alternate.cur'), pointer;
                    &:hover{
                        color: #fff;
                    }
                }
            }
        }

        //游戏排行榜
        .paihangbang{
            .ranking{
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                box-shadow: 0 0px 10px rgba(0,0,0,.2);
                -webkit-transition: all .25s ease-in-out;
                   -moz-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                     -o-transition: all .25s ease-in-out;
                        transition: all .25s ease-in-out;
                        cursor: url('/image/alternate.cur'), pointer;
                &:hover{
                    background-color: rgba(0,0,0,0.3);
                }
                span{
                    display: inline-block;
                    padding-top: 30px;
                    padding-left: 20px;
                    font-size: 20px;
                }
            }
            .back{
                position: absolute;
                left: 0;
                bottom: 0;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                box-shadow: 0 0px 10px rgba(0,0,0,.2);
                -webkit-transition: all .25s ease-in-out;
                   -moz-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                     -o-transition: all .25s ease-in-out;
                        transition: all .25s ease-in-out;
                        cursor: url('/image/alternate.cur'), pointer;
                &:hover{
                    background-color: rgba(0,0,0,0.3);
                }
                span{
                    display: inline-block;
                    padding-top: 30px;
                    padding-left: 30px;
                    font-size: 20px;
                }
            }
            .game-ranking{
                    position: absolute;
                    width: 300px;
                    height: 330px;
                    left: 50%;
                    top: 50%;
                    margin-left: -150px;
                    margin-top: -250px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    -webkit-transition: all .25s ease-in-out;
                   -moz-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                     -o-transition: all .25s ease-in-out;
                        transition: all .25s ease-in-out;
            }
        }


    }
}


